<template>
	<view class="content">
		我是首页
		<view class="banner">
			<image src="../../static/imges/banner.jpg" mode="widthFix"></image>
		</view>
		<!-- 使用子组件 -->
		<myswiper v-if="flag" :tit='title' @transfer= 'getvalue'></myswiper>
		<button type="default" @click="flag=!flag">显示隐藏轮播图组件</button>
		<!--使用编程式导航跳转页面 -->
		<button @click="changepageFn">跳转页面</button>
		
		<!-- 遍历语法 -->
		<view class="">
			<view class="" v-for="item in heroArr" :key="item.id" @click="gotodetail(item.id)">
				{{item.id}}: {{item.name}}
			</view>
		</view>
		<!--在h5页面中有,在其他平台没有 -->
		<!-- #ifdef H5 -->
			<view class="box1-h5">
				我是h5代码
			</view>
		<!-- #endif -->
		
		<view class="box1">
			我是测试不同平台的样式代码
		</view>
		<view class="box2" @click="handleClickFn">
			我是测试不同平台的js代码
		</view>
	</view>
</template>

<script>
	// 条件编译 中根据判断情况自动将符合条件的代码打包到对应的程序中,这样节省代码体积
	
	const app = getApp();
	// 页面组件的生命周期
	// 首先 有小程序的生命周期
	// 还有vue组件自带的生命周期
	
	import myswiper from '../../components/myswiper.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				flag: true,
				heroArr:[
					{
						id:1,
						name:"小黄"
					},
					{
						id:2,
						name:"小黑"
					}
				]
			}
		},
		components: {
			myswiper
		},
		onLoad() {
			console.log('onload')
		},
		onShow() {
			console.log('onshow')
			console.log(app)
		},
		onHide() {
			console.log('onHide')
		},
		created() {
			console.log('created')
		},
		mounted() {
			console.log('mounted')
		},
		destroyed() {
			// 当关闭当前页面时触发
			console.log('destroyed')
		},
		methods: {
			changepageFn() {
				uni.reLaunch({
					url:'../detail/detail'
				})
			},
			gotodetail(id){
					console.log(id)
			},
			getvalue(m){
			   console.log('就是数据',m)
			},
			handleClickFn(){
				// #ifdef H5
					alert('h5')
				// #endif
				// #ifdef MP-WEIXIN
					console.log('weixin')
				// #endif
			}
		}
	}
</script>

<style>
	.banner {
		width: 704rpx;
		margin: 0 auto;
	}

	.banner image {
		width: 100%;
	}
	
	.box1-h5{
		width: 300rpx;
		height: 300rpx;
		background-color: red;
	}
	/* #ifdef H5 */
	.box1{
		width: 300rpx;
		height: 300rpx;
		background-color: #4CD964;
	}
	/* #endif */
	/* #ifndef H5 */
	.box1{
		width: 300rpx;
		height: 300rpx;
		background-color: yellow;
	}
	/* #endif */
	
	
</style>
